<template>
  <div class="play" v-if="currMusicInfo.id">
    <div class="header">
      <div class="title">
        <router-link to="/">
          <i class="el-icon-s-home left"></i>
        </router-link>
        <div class="music-info">
          <p>{{ currMusicInfo.songName }}</p>
          <p class="author">{{ currMusicInfo.singerName }}</p>
        </div>
        <router-link :to="{name: 'SearchIndex'}">
          <i class="el-icon-search right"></i>
        </router-link>
      </div>
    </div>

    <div class="song-info">
      <div class="song-info-img">
        <img :src="currMusicInfo.imgUrl">
<!--        <Lrc :songid="this.$route.params.id" :currentTime="currentTime" :duration="duration"/>-->
      </div>
      <div class="iconbox">
        <i class="el-icon-star-off left"></i>
        <i class="box"></i>
        <i class="el-icon-download right"></i>
      </div>
    </div>

    <div class="song">
      <audio ref="player" :src="completeMusicUrl(currMusicInfo.url)" controls></audio>
    </div>
  </div>
</template>

<script>
  import TopNav from "../../components/Nav/TopNav";
  export default {
    name: "index",
    components: {TopNav},
    data() {
      return {
        currMusicInfo: {}
      }
    },
    methods: {
      getCurrentMusic() {
        // console.log()
        this.$api.home.getSongDetailInfo(this.$route.params.songId)
        .then(res => {
          // console.log(res.data)
          this.currMusicInfo = res.data.data
          //在这里添加事件，监听获取音乐的总时长和当前时长
          // DOM还没有更新
          this.$nextTick(function() {
            // DOM 现在更新了
            //获取当前播放时间和总时长
            this.playerAddEventListen();
          });

          // 这里会被打死
          // setTimeout(() => {
          //     console.log(this.$refs.player);
          // });
        })
      },
      completeMusicUrl(originalUrl) {
        return this.$api.completor.completeStaticMusicUrl(originalUrl)
      },
      //添加、移除事件相关
      playerAddEventListen(){
        this.$refs.player.addEventListener("timeupdate",this.currentTimeHandler)
        this.$refs.player.addEventListener("canplay",this.durationTimeHandler)
      },
      playerRemoveEventListen(){
        this.$refs.player.removeEventListener("timeupdate",this.currentTimeHandler);
        this.$refs.player.removeEventListener("canplay",this.durationTimeHandler)
      },

      currentTimeHandler(){
        // this.currentTime = this.$refs.player.currentTime;
        console.log(this.$refs.player.currentTime)
      },
      durationTimeHandler(){
        // this.duration = this.$refs.player.duration
        console.log(this.$refs.player.duration)
      }
    },
    mounted() {
      this.getCurrentMusic()
    },
    beforeDestroy() {
      this.playerRemoveEventListen();
    }
  }
</script>

<style scoped>
  .header {
    padding: 15px;
  }

  .music-info {
    flex: 1;
    font-size: 20px;
  }

  .title {
    display: flex;
    text-align: center;
  }

  .left {
    font-size: 30px;
  }

  .ca {
    color: red;
  }

  .right {
    font-size: 30px;
  }

  .song-info {
    padding: 15px;
  }

  .song-info-img {
    text-align: center;
  }

  .song-info-img img {
    width: 50%;
    border-radius: 5px;
    box-shadow: 0 0 10px 0 rgba(50, 50, 50, 0.31);
  }

  .song-lrc {
    margin-top: 10px;
    min-height: 50px;
  }

  .iconbox {
    display: flex;
    margin-top: 30px;
  }

  .iconbox .box {
    flex: 1;
  }

  .song {
    width: 100%;
    text-align: center;
  }

  .song audio {
    width: 80%;
  }

  .active {
    color: #222;
  }

  .author {
    font-size: 12px;
    color: #999;
  }
</style>
